/**
 * 图形样式修改
 * @Author: zhangshubin
 * @Date: 2023-12-08 16:48:01
 * @Last Modified by: zhangshubin
 * @Last Modified time: 2023-12-13 15:48:22
 * */

import { Divider } from 'antd'
import TextSetting from './TextSetting'
import FillSetting from './FillSetting'
import LineSetting from './LineSetting'
import AlginSetting from './AlignSetting'
import LayoutSetting from './LayoutSetting'
import { mxCell } from 'mxgraph'
import { useEffect, useState } from 'react'
import GraphUtil from '@/util/GraphUtil'
import EditorExecutor from '@/executor/EditorExecutor'

interface IGraphStylePaneProps {
  cells?: mxCell[]
}

export default function GraphStylePane(props: IGraphStylePaneProps) {
  const [cellJson, setCellJson] = useState(GraphUtil.createSelectionStateForCell())
  useEffect(() => {
    const { cells = [] } = props
    let json = GraphUtil.createSelectionStateForCell()
    if (cells?.length > 0) {
      json = GraphUtil.getSelectionStateForCell(EditorExecutor.graph, cells[0])
    }
    // console.log(json)
    setCellJson(json)
  }, [props, props.cells])

  return (
    <>
      <Divider className="mt-3px mb-0px" />
      <AlginSetting cells={props.cells} cellState={cellJson} />
      <Divider className="mt-10px mb-8px" />
      <LayoutSetting cellState={cellJson} />
      <Divider className="mt-10px mb-8px" />
      <TextSetting cellState={cellJson} />
      <Divider className="mt-10px mb-8px" />
      <FillSetting cellState={cellJson} />
      <Divider className="mt-10px mb-8px" />
      <LineSetting cellState={cellJson} />
    </>
  )
}
